<template>
    <!-- 回复组件revert -->
    <div class="detail">
        <div class="detailitem" :class="{markDown: change}">
            <Row class="detailitemHead">
                <Col span=3 class="detail-H" @click.native="reversclose"><Icon type="close" color="#0093DD" style="font-size:18px;"/></Col>
                <Col span=18 class="detail-R">回复</Col>
            </Row>
            <Row class="detailcont">
                <Col span=20 offset="2" v-if="hstate">
                    <p v-if="show" style="color:red;">输入的内容不能为空</p>
                    <textarea name="" id="" cols="30" rows="10"  v-model="textArea" placeholder="请输入1000字以内的回复" class="textA" :maxlength="1000"></textarea>
                </Col>
                <Col span=20 offset="2" v-show="hstate">
                    <div type="success" class="s-button" @click="reverstijiao()">提交</div>
                </Col>
                <Col span=4 offset="10" type="flex" align="center" v-if="succse">
                    <div class="s-sucess">
                        <img src="static/staff/caozuosuccess.png" alt="" height="40px">
                        <p>回复成功</p>
                    </div>
                </Col>
                <Col span=4 offset="10" type="flex" align="center"  v-if="unti">
                    <div class="s-sucess">
                        <img src="static/staff/caozuoshibai.png" alt="" height="40px">
                        <p>回复失败</p>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    props: ['eventId'],
    data() {
        return {
            textArea: '',
            hstate: true,
            succse: false,
            unti: false,
            show: false,
            change: false,
            ttn: 1
        }
    },
    methods: {
        reversclose() { // 关闭按钮触发建议
            this.$emit('sta')
        },
        reverstijiao() {
            /**
             * 发布建言献策
             * @userId
             */
            let Vm = this
            let State = this.$store.state
            async function setAddEvent() {
                let tt = await Vm.$store.dispatch('updateEventflow', {
                    user_id: State.userInfo.USER_ID,
                    event_id: Vm.eventId,
                    eventflow_content: Vm.textArea
                })
                console.log(tt)
                if (tt.data.status === 0) {
                    Vm.hstate = false
                    Vm.succse = true
                } else {
                    Vm.hstate = false
                    Vm.unti = true
                }
            }
            if (Vm.textArea.length > 0) {
                Vm.show = false
                setAddEvent()
            } else {
                Vm.show = true
            }
        },
        tijiao() {
            console.log('lalal')
        }
    },
    created() {
        const Vm = this
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            console.log(2345)
        }
        isUserInfo().then(() => {
            Step()
            this.change = true
        })
    }
}
</script>

<style lang="less">
.detail{
    position:fixed;
    z-index: inherit 100px;
    width:100%;
    height:100%;
    overflow: auto;
    top:0;
    left: 0;
    background-color:rgba(7,17,27,0.8);
    .detailitem{
        background-color: #fff;
        width: 100%;
        height: 290px;
        position: fixed;
        overflow: hidden;
        bottom: -415px;
        z-index: 11; 
        transition: all .3s linear 0s;
        -webkit-transition: all .3s linear 0s;
        .detailitemHead{
            height: 55px;
            width:100%;
            text-align:center;
            font-size:16px;
            border-bottom:1px solid #E4E4E4;
            .detail-H{
                padding:15px 0;
            }
            .detail-R{
                font-size:18px;
                padding:15px 0;
            }
        }
        .detailcont{
            padding:20px 0;
            background-color:white; 
            .textA{
                border:1px solid #dadada !important;
                border-radius:5px;
                width: 100%;
                height: 130px;
                padding: 10px;
                resize:none !important;
                background-color: #f8f8f8;
            }
            .textA input:focus,textarea:focus {
                outline: none;
                border:1px solid #dadada !important;
            }

            .s-button{
                color:white;
                width:100%;
                height: 50px;
                text-align:center;
                line-height:50px;
                margin-top:10px;
                border-radius:5px;
                font-size: 18px;
                background-color:#0093DD;
            }
            .s-sucess{
                margin-top:80px;
                color:#999;
            }
        }
    }
    .markDown {
    transform:translateY(-415px);
    }
}
</style>
